<template>
<div>
	<heads title='购物车'>
		<div slot='right' @touchend='order'>{{ edit }}</div>
	</heads>
	<ul id="cart-goods">
		<li v-for='good in goods'>
			<p class='checkbox' :class='{active:good.isSelectd}' @touchend='select(good)'>
				<i class='iconfont icon-nike' style='color:white;' v-show='good.isSelectd'></i>
			</p>
			<p class='pic'><img :src=good.img></p>
			<div class="intro">
				<p>{{ good.name | beyond }}</p>
				<p>规格: {{ good.standard }}</p>
				<div>
					<span>{{ good.price}}</span>
					<span class='fr' v-show='!edit_bol'>x&nbsp&nbsp{{ good.number}}</span>
					<div class='fr change' v-show='edit_bol'>
						<span @touchend='sub(good)'></span>
						<input type="number" v-model='good.number' style='width:.3rem;text-align:center;'>
						<span @touchend='add(good)'>+</span>
					</div>
				</div>
			</div>
		</li>
	</ul>

	<div id="total">
		<div class="left fl" @touchend='toggleAll'>
			<p class="fl" :class='{active:all}'>
				<i class="iconfont icon-nike" style='color:white;' v-show='all'></i>
			</p>
			<span>全选</span>
		</div>
		<div class="middle">
			<p>
				<span style='font-size:.14rem;'>合计</span>
				<span style='color:#ed601b'>¥&nbsp{{ total }}</span>
			</p>
			<p style='font-size:.12rem;color:#737373'>(不含运费)
				
			</p>
		</div>
		<div class="right fr">
			<p v-show='!edit_bol' @touchend='pay'>结&nbsp&nbsp算<span>{{ number }}</span></p>
			<p v-show='edit_bol' @touchend='del'>删&nbsp&nbsp&nbsp除</p>
		</div>
	</div>
	</div>
</template>
<script>
import Heads from '../components/header'
	var data = [{
            name:'坚果特产',
            standard:'1盒6片',
            img:'./img/1.png',
            number:1,
            price:10.9,
            isSelectd:false,
        },
        {
            name:'坚果特产山核桃奶油味碧根果',
            standard:'1盒6片',
            img:'./img/1.png',
            number:2,
            price:6,
            isSelectd:false,
        },
        {
            name:'坚果特产山核桃奶油味碧根果',
            standard:'1盒6片',
            img:'./img/1.png',
            number:1,
            price:10,
            isSelectd:false,
        },{
            name:'坚果特产山核桃奶油味碧根果',
            standard:'1盒6片',
            img:'./img/1.png',
            number:3,
            price:30,
            isSelectd:false,
        }
    ];

	export default{
		components:{
			Heads
		},
		data(){
			return{
				edit_bol:false,
				goods:data,
				isActive:false,
				all:false,
				all_bol:false
			}
		},
		methods:{
			order(){
				this.edit_bol = !this.edit_bol;
			},
			select(good){
				good.isSelectd = !good.isSelectd;
			},
			sub(good){
				good.number--;
				if(good.number <= 0){
					good.number = 0;
					console.log(1)
				}
				return good.number;

			},
			add(good){
				return ++good.number;
			},
			toggleAll(){
				this.all_bol = !this.all_bol;
				const bol = this.all_bol;
				this.goods.map(function(good){
					good.isSelectd = bol;
				})
			},
			pay(){
				alert(`盛惠 ¥${this.total}`)
			},
			del(){
				for(let i = 0; i < this.goods.length; i++){
					if(this.goods[i].isSelectd){
						this.goods.splice(i,1);
						i--;
					}
				}
			}
		},
		computed:{
			edit(){
				return this.edit_bol?'完成':'编辑';
			},
			all(){
				// computed里的东西会在值改变的时候执行一次,所以每次num都会被定义为100
				var num = 100;
				this.goods.map(function(good,i){
					// 这里不懂,当good.isSelectd===false时,   !good.isSelectd===true,执行与语句为num = i,也就是没有选到的商品能激活num = i的语句,那当good.isSelectd===true,!good.isSelectd===false时,执行后面的'',是指不执行,相当于if(!good.isSelectd){num=i};
					!good.isSelectd?num=i:'';
				});
				console.log(num)
				if(this.goods.length === 0){
					num = 0;
				}
				return num === 100 ? true : false;
			},
			total(){
				var sum = 0;
				this.goods.map(function(good){
					if(good.isSelectd){
						sum+=good.price*good.number;
					}
				})
				return sum.toFixed(2);
			},
			number(){
				var _number = 0;
				this.goods.map(function(good){
					if(good.isSelectd){
						_number += good.number;
					}
				})
				return `(${_number})`;
			}
		},
		filters: {
			beyond(str){
				return str.length>7?(str.substr(0,7)+'...'):str;
			}
		}
	}
</script>
<style lang='less'>
#cart-goods{
	margin-top: 0.43rem;
	background:white;
	li{
		display: flex;
	    align-items: center;
	    box-sizing: border-box;
	    padding:0.15rem 0.1rem 0.1rem 0.1rem;
	    /*justify-content: center;*/
	    width:100%;
	    height:0.95rem;
	    border-bottom:1px solid rgba(0,0,0,0.15);
	    font-size:0.15rem;
	    .active{
			border:none !important;
			border-radius: 100% !important;
			width:0.18rem !important;
			height:0.18rem !important;
			background:#f29004 !important;
		}
	    .checkbox{
	    	width:0.16rem;height:0.16rem;
	    	border:1px solid #dedede;
	    	border-radius: 100%;
	    	background: #f2f2f2;
	    	text-align: center;
	    	line-height: 0.18rem;
	    	i{
	    		position: relative;
	    		top:0.01rem;
	    	}
	    }
		.pic{
			width:0.7rem;height:0.7rem;
			img{
 				width:100%;height: 100%;
			}
		}
		.intro{
			width:2.55rem;height:100%;
			.change{
				display: flex;
				align-items: center;
				justify-content:space-between;
				input{
					font-size:0.16rem;
				}
				span{
					display: inline-block;
					width:0.2rem;height:0.2rem;
					border-radius: 100%;
					text-align: center;
					border:1px solid rgba(0,0,0,0.15);
					line-height: 0.2rem;
					font-size: 0.25rem;
					/*color:#d3d3d3;*/
					color:red;
					&:first-child:after{
						content: '-';
						display: inline;
						position: relative;
						top:-0.02rem;
						font-size: 0.3rem;
					}
				}
			}
		}
	}
}



#total{
    width:100%;height:0.57rem;
    box-sizing: border-box;
    border-top:1px solid rgba(0,0,0,0.15);
    position:fixed;
    bottom:0.5rem;left:0;
    /*background:#adadad;*/
    font-size:0.16rem;
    color:#343434;
    padding:0 0.1rem 0 0.1rem;
    display: flex;
	align-items: center;
	justify-content:space-between;
    .left{
		p{
			width:0.16rem;height:0.16rem;
	    	border:1px solid #dedede;
	    	border-radius: 100%;
	    	background: #f2f2f2;
	    	text-align: center;
	    	line-height: 0.18rem;
	    	margin-right:0.1rem;
	    	i{
	    		position: relative;
	    		top:0.01rem;
	    	}
		}
		.active{
			border:none !important;
			border-radius: 100% !important;
			width:0.18rem !important;
			height:0.18rem !important;
			background:#f29004 !important;
		}
    }
    .middle{
		
    }
    .right{
    	width:1.28rem;height:0.37rem;
		text-align: center;
		line-height: 0.37rem;
		background:#ee4147;
		border-radius: 0.05rem;
		font-size:0.17rem;
		color:white;
    }
}

</style>